<template>
    <div class="middle-bg">
        <div class="middle-header">
            <div class="time-wrapper tt">
                <div class="time-row">{{nowDate.hours}}</div>
                <span> : </span>
                <div class="time-row">{{nowDate.minutes}}</div>
                <span> : </span>
                <div class="time-row">{{nowDate.seconds}}</div>
            </div>
            <div @click = "()=>{this.$router.push('/welcome');}"  class="logo-row">
                <img src="../../assets/dp1/logo.png" alt="">
                <div class="light-text logo-text">智慧肥乡一体化服务运营中心</div>
            </div>
            <div class="weather-row">
                <!-- <img :src="weatherInfo.weatherImg" alt="">
                <div>
                    <span class="weather-num">{{weatherInfo.temp}}</span>
                    <span class="weather-tag">℃</span>
                </div> -->
                <img class="site-img" src="../../assets/layout/local-site.png" alt="">
                <span class="site-name">肥乡区</span>
                
            </div>
        </div>
        <ul class="type-swtich">
            <li @click = "showSjrhMap" class="relative pointer">
                <div class="type-row">
                    一张图
                </div>
                <div></div>
                <img src="../../assets/dp1/switch-bg.png" alt="">
            </li>
            <li v-for="(item,index) in typeList" :key="index" class="relative">
                <div class="type-row">
                    {{item.name}}
                    <div @click="toggleType(item,index)" class="switch-wrapper">
                        <div class="switch-comp" :class="{checked:index==currentTypeIndex}">
                            <div class="switch-circle"></div>
                        </div>
                    </div>
                </div>
                <div></div>
                <img src="../../assets/dp1/switch-bg.png" alt="">
            </li>
        </ul>
        <div class="show-type">
            <div class="left-top"></div>
            <div class="left-bottom"></div>
            <div class="right-top"></div>
            <div class="right-bottom"></div>
            <ul>
                <li v-for=" (item,index) in showList" :key="index" class="show-type-list">
                    <img :src="item.icon" alt="">
                    <span>{{item.name}}</span>
                </li>
            </ul>
        </div>
        <div id="mapStat" class="map-stat">

        </div>
        <div class="bottom">
            <ul class="bottom-wrapper">
                <li v-for="(item,index) in dpList" @click="handleDpType(item,index)" :key="index" :class="{active:index==currentIndex}" class="dp-handle-row">
                    <div class="icon-row">
                        <img class="icon" v-if="!!item.name" :src="item.icon" alt="">
                        <span v-else>+</span>
                    </div>
                    <div class="circle-row">
                    </div>
                    <div>{{item.name}}</div>
                </li>
            </ul>
            <img class="bottom-bg" src="../../assets/dp1/bottom-bg.png" alt="">
        </div>
        <SJRHModal :visible = "showSjrhModal" @close = "showSjrhModal = false"/>
    </div>
</template>

<script>
import $ from "jquery";
import echarts from "echarts";
import { mapOption } from "./statConfig";
import Pubsub from "../../utils/pubsub";
import SJRHModal from "./sjrhModal";
import { 
    getWeather,
    getZwspMap,
    getCgMap,
    getLxyzMap,
    getShykMap,
} from "../../config/api";

const zhzxIcon = require("../../assets/dp1/zhzx.png");
const djztIcon = require("../../assets/dp1/djzt.png");
const zwztIcon = require("../../assets/dp1/zwzt.png");
const zzztIcon = require("../../assets/dp1/zzzt.png");
const cgztIcon = require("../../assets/dp1/cgzt.png");

const icon1 = require("../../assets/dp1/middle-icon1.png");
const icon2 = require("../../assets/dp1/middle-icon2.png");
const icon3 = require("../../assets/dp1/middle-icon3.png");
const icon4 = require("../../assets/dp1/middle-icon4.png");
const icon5 = require("../../assets/dp1/middle-icon5.png");
const icon6 = require("../../assets/dp1/middle-icon6.png");
const icon7 = require("../../assets/dp1/middle-icon7.png");
const icon8 = require("../../assets/dp1/middle-icon8.png");
const icon9 = require("../../assets/dp1/middle-icon9.png");
const icon10 = require("../../assets/dp1/middle-icon10.png");

let typeListEvent = {//两学一做，三会议课等切换
    lxyz:{request:getLxyzMap},
    shyk:{request:getShykMap},
    zwsp:{request:getZwspMap},
    sjfb:{request:getCgMap},
}

export default {
    props: ["nowDate", "weatherInfo"],
    components:{
        SJRHModal
    },
    data() {
        return {
            currentIndex: 0, //大屏专栏操作列表下标
            currentTypeIndex: 0, //操作类型下标
            showSjrhModal:false,
            commonRequest: {
                type: ""
            },
            currentEventType:"lxyz",
            dpList: [
                { name: "综合展现", icon: zhzxIcon, type: 1 ,path:"/dp1"},
                { name: "党建专题", icon: djztIcon, type: 2 ,path:"/dp2"},
                { name: "政务专题", icon: zwztIcon, type: 3 ,path:"/dp3"},
                { name: "综治专题", icon: zzztIcon, type: 4, path: "/dp4"  },
                { name: "城管专题", icon: cgztIcon, type: 5 ,path:"/dp5"},
                { name: "", icon: "+", type: 6 }
            ],
            typeList: [
                // {
                //     name: "两学一做",
                //     type: 1,
                //     eventType:"lxyz",
                //     list: [{ name: "两学一做", type: 1, icon: icon1 }]
                // },
                {
                    name: "三会一课",
                    type: 2,
                    eventType:"shyk",
                    list: [{ name: "三会一课", type: 2, icon: icon2 }]
                },
                {
                    name: "政务审批",
                    type: 3,
                    eventType:"zwsp",
                    list: [{ name: "政务审批", type: 3, icon: icon3 }]
                },
                // {
                //     name: "天网视频",
                //     type: 4,
                //     list: [{ name: "天网视频", type: 4, icon: icon4 }]
                // },
                {
                    name: "事件分布",
                    type: 4,
                    eventType:"sjfb",
                    list: [
                        { name: "市容环境类", type: 5, icon: icon5 },
                        { name: "街面秩序类", type: 5, icon: icon6 },
                        { name: "施工管理类", type: 5, icon: icon7 },
                        { name: "突发事件类", type: 5, icon: icon8 },
                        { name: "宣传广告类", type: 5, icon: icon9 },
                        { name: "其他事件类", type: 5, icon: icon10 },

                        ]
                }
            ],
            showList: [{ name: "三会一课", type: 2, icon: icon2 }]
        };
    },
    mounted() {
        this.initMap(this.getLxyzMapData);
          this.pubsub_token1 = Pubsub.subscribe("refreshDpData", (t, args) => {
            let { type } = args;
            this.commonRequest.type = type;
            this.initData();
        });
    },
    methods: {
        showSjrhMap(){
            this.showSjrhModal = true;
        },
        initData(){
            // typeListEvent[this.currentEventType].request(this.commonRequest).then(()=>{

            // })
             typeListEvent[this.currentEventType].request(this.commonRequest).then((result = {})=>{
                let data = result.data || [];
                this.setMap(data);
            })
        },
        /**
         * 设置地图散列点
         */
        setMap(data){
            this.myMap.setOption(mapOption(data));
        },
        /**
         * 两学一做地图散点
         */
        getLxyzMapData(){
            getLxyzMap().then((result = {})=>{
                let data = result.data || [];
                this.setMap(data);
            })
        },
        /**
         * 类型切换事件
         */
        toggleType(item, index) {
            this.showList = item.list;
            this.currentTypeIndex = index;
            this.currentEventType = item.eventType;
            this.initData();
        },
        initSeriesData: function(data) {
            var temp = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    temp.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value, data[i].level)
                    });
                }
            }
            return temp;
        },
        initMap(cb) {
            let _this = this;
            $.getJSON("./ff.json", function(getJSON) {
                echarts.registerMap("ff", getJSON);
                _this.myMap = echarts.init(document.getElementById("mapStat"));
                _this.myMap.setOption(mapOption());
                cb && cb();
            });
        },
        handleDpType(item, index) {
            console.log(index);
            this.currentIndex = index;
            if (item.path) {
                this.$router.push(item.path);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.middle-bg {
    width: 1200px;
    position: relative;
    #mapStat {
        width: 858px;
        height: 538px;
        margin-left: 160px;
        margin-top: 88px;
    }
    .middle-header {
        height: 88px;
        width: 1200px;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .logo-text {
        font-size: 30px;
        font-weight: bold;
        margin-left: 20px;
        letter-spacing: 1.5px;
    }
    .logo-row {
        display: flex;
        align-items: center;
        justify-content: center;
        // margin-bottom: 14px;
        // margin-left: -20px;
        flex: 1;
        position: absolute;
        width: 1200px;
        margin-left: -12px;
        bottom: 22px;
        cursor: pointer;
        z-index: 9999;
    }
    .time-wrapper {
        font-family: "Regular";
        display: flex;
        top: 51px;
        left: 30px;
        align-items: center;
        font-size: 24px;
        color: #f9a400;
        text-align: center;
        margin-top: 34px;
        margin-left: 20px;
    }
    .time-row {
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        background-color: rgba(4, 115, 252, 0.4);
        border: solid 1px #49576b;
        margin: 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .weather-row {
        display: flex;
        align-items: center;
        // font-size: 28px;
        margin-top: 30px;
        padding-right: 30px;
        .site-img{
            height:42px;
            width: 42px;
            margin-right: 10px;
            margin-bottom:4px;
        }
        .site-name{
            font-size: 28px;
        }
        .weather-num {
            font-size: 32px;
            margin-left: 15px;
            margin-right: 3px;
        }
        .weather-tag {
            font-size: 18px;
        }
        img {
            width: 66px;
            height: 56px;
        }
    }
    .bottom {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1200px;
        position: absolute;
        bottom: 0;
        .bottom-bg {
            // margin-left: 30px;
        }
    }
    .bottom-wrapper {
        width: 585px;
        height: 55px;
        // margin-left: 30px;
        display: flex;
        justify-content: space-around;
        position: absolute;
        bottom: 67px;
    }
    .dp-handle-row {
        text-align: center;
        color: #abd1ff;
        &.active {
            .circle-row {
                opacity: 1;
            }
            color: #f0f7ff;
        }
        .circle-row {
            width: 85px;
            height: 85px;
            border-radius: 50%;
            margin-bottom: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: linear-gradient(
                    0deg,
                    #0072ff 0%,
                    #2a89ff 51%,
                    #54a0ff 100%
                ),
                linear-gradient(#bfbfbf, #bfbfbf);
            background-blend-mode: normal, normal;
            box-shadow: 1.5px 2.6px 19px 1px rgba(0, 0, 0, 0.96);
            opacity: 0.4;
        }
    }
    .icon-row {
        height: 85px;
        width: 85px;
        position: absolute;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
    }
    .icon {
        z-index: 999;
    }
}
.type-swtich {
    position: absolute;
    right: 20px;
    top: 120px;
    .type-row {
        height: 70px;
        width: 140px;
        position: absolute;
        color: #dcecff;
        display: flex;
        align-items: center;
        justify-content: center;
        left: -7px;
        top: -1px;
    }
}
.show-type {
    position: absolute;
    bottom: 20px;
    width: 150px;
    background: rgba(0, 73, 202, 0.2);
    padding: 5px 0 5px 22px;
    box-sizing: border-box;
    &-list {
        display: flex;
        align-items: center;
        color: #b6e4ff;
        padding: 8px 0;
        img {
            margin-right: 15px;
        }
    }

    .left-top {
        height: 10px;
        width: 10px;
        border-top: 1px solid #b9d2ff;
        border-left: 1px solid #b9d2ff;
        left: 0px;
        position: absolute;
        top: 0px;
        opacity: 0.6;
    }
    .left-bottom {
        height: 10px;
        width: 10px;
        border-bottom: 1px solid #b9d2ff;
        border-left: 1px solid #b9d2ff;
        left: 0px;
        position: absolute;
        bottom: 0px;
        opacity: 0.6;
    }
    .right-top {
        height: 10px;
        width: 10px;
        border-top: 1px solid #b9d2ff;
        border-right: 1px solid #b9d2ff;
        right: 0px;
        position: absolute;
        top: 0px;
        opacity: 0.6;
    }
    .right-bottom {
        height: 10px;
        width: 10px;
        border-right: 1px solid #b9d2ff;
        border-bottom: 1px solid #b9d2ff;
        right: 0px;
        position: absolute;
        bottom: 0px;
        opacity: 0.6;
    }
}
.switch-wrapper {
    position: absolute;
    right: 7px;
    cursor: pointer;
    .switch-comp {
        height: 28px;
        width: 16px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #2c3466;
        .switch-circle {
            height: 12px;
            width: 12px;
            border-radius: 12px;
            position: absolute;
            top: 12px;
            transition: top 0.3s ease-in-out;

            background-image: linear-gradient(180deg, #67a8fa 0%, #0070ff 100%),
                linear-gradient(#0474fe, #0474fe);
            background-blend-mode: normal, normal;

            box-shadow: 1px 1.7px 2px 0px rgba(0, 0, 0, 0.51);
            border-radius: 6.2px;
        }
        &.checked {
            background: #a59c00;

            .switch-circle {
                background-image: linear-gradient(
                        180deg,
                        #fff875 0%,
                        #ddd100 100%
                    ),
                    linear-gradient(#0474fe, #0474fe);
                background-blend-mode: normal, normal;
                top: 3px;
            }
        }
    }
}
.showMap{
    color:#fff;
}
</style>